<template>
    <div class="unload-list-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>
              <el-input v-model="searchKeyword" placeholder="搜索卸货单号/验收人" size="small"
                style="width: 200px; margin-right: 10px" @input="filterTable" />
              <el-select v-model="filterStatus" placeholder="筛选状态" size="small" clearable
                style="width: 150px; margin-right: 10px" @change="filterTable">
                <el-option label="待验收" value="待验收" />
                <el-option label="已验收" value="已验收" />
              </el-select>
              <el-button type="primary" icon="Plus" @click="openDialog">新增卸货记录</el-button>
              <el-button icon="Download" @click="exportTable">导出</el-button>
            </div>
          </div>
        </template>
  
        <el-table :data="filteredData" border>
          <el-table-column prop="unloadId" label="卸货单号" />
          <el-table-column prop="checkPerson" label="验收人" />
          <el-table-column prop="checkDate" label="验收日期" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="productCode" label="商品编码" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="partnerName" label="合作单位" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="已验收"
                inactive-value="待验收"
                @change="toggleStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template #default="scope">
              <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteRow(scope.row.unloadId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <el-dialog v-model="dialogVisible" title="外包卸货登记" width="600px">
        <el-form :model="form" label-width="100px">
          <el-form-item label="卸货单号">
            <el-input v-model="form.unloadId" />
          </el-form-item>
          <el-form-item label="验收人">
            <el-input v-model="form.checkPerson" />
          </el-form-item>
          <el-form-item label="验收日期">
            <el-date-picker v-model="form.checkDate" type="date" style="width: 100%" />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="form.productName" />
          </el-form-item>
          <el-form-item label="商品编码">
            <el-input v-model="form.productCode" />
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="form.quantity" type="number" />
          </el-form-item>
          <el-form-item label="合作单位">
            <el-input v-model="form.partnerName" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveForm">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import dayjs from 'dayjs'
  
  const searchKeyword = ref('')
  const filterStatus = ref('')
  const dialogVisible = ref(false)
  
  interface UnloadItem {
    unloadId: string
    checkPerson: string
    checkDate: string
    productName: string
    productCode: string
    quantity: number
    partnerName: string
    status: '待验收' | '已验收'
  }
  
  const rawData = ref<UnloadItem[]>([
    {
      unloadId: 'UL20240501-001', checkPerson: '赵六',
      checkDate: '2024-05-04', productName: '建筑钢材',
      productCode: 'JG-826', quantity: 13,
      partnerName: '顺丰仓', status: '已验收'
  },
    {
      unloadId: 'UL20240501-002', checkPerson: '张三',
      checkDate: '2024-05-03', productName: '建筑钢材',
      productCode: 'JG-585', quantity: 69,
      partnerName: '德邦卸货', status: '待验收'
  },
    {
      unloadId: 'UL20240501-003', checkPerson: '张三',
      checkDate: '2024-05-01', productName: '电动工具',
      productCode: 'DT-126', quantity: 43,
      partnerName: '中铁物流', status: '待验收'
  },
    {
      unloadId: 'UL20240501-004', checkPerson: '赵六',
      checkDate: '2024-05-06', productName: '建筑钢材',
      productCode: 'JG-214', quantity: 23,
      partnerName: '顺丰仓', status: '待验收'
  },
    {
      unloadId: 'UL20240501-005', checkPerson: '张三',
      checkDate: '2024-05-01', productName: '电动工具',
      productCode: 'DT-763', quantity: 24,
      partnerName: '中铁物流', status: '待验收'
  },
    {
      unloadId: 'UL20240501-006', checkPerson: '李四',
      checkDate: '2024-05-03', productName: '建筑钢材',
      productCode: 'JG-551', quantity: 20,
      partnerName: '京东协作', status: '已验收'
  },
    {
      unloadId: 'UL20240501-007', checkPerson: '王五',
      checkDate: '2024-05-06', productName: '电动工具',
      productCode: 'DT-926', quantity: 33,
      partnerName: '中铁物流', status: '已验收'
  },
    {
      unloadId: 'UL20240501-008', checkPerson: '王五',
      checkDate: '2024-05-01', productName: '电动工具',
      productCode: 'DT-892', quantity: 43,
      partnerName: '德邦卸货', status: '已验收'
  },
    {
      unloadId: 'UL20240501-009', checkPerson: '李四',
      checkDate: '2024-05-06', productName: '建筑钢材',
      productCode: 'JG-352', quantity: 25,
      partnerName: '京东协作', status: '待验收'
  },
    {
      unloadId: 'UL20240501-010', checkPerson: '张三',
      checkDate: '2024-05-04', productName: '管道配件',
      productCode: 'GD-578', quantity: 21,
      partnerName: '京东协作', status: '已验收'
  },
    {
      unloadId: 'UL20240501-011', checkPerson: '李四',
      checkDate: '2024-05-03', productName: '照明设备',
      productCode: 'ZM-144', quantity: 32,
      partnerName: '顺丰仓', status: '已验收'
  },
    {
      unloadId: 'UL20240501-012', checkPerson: '李四',
      checkDate: '2024-05-06', productName: '照明设备',
      productCode: 'ZM-811', quantity: 9,
      partnerName: '德邦卸货', status: '待验收'
  },
    {
      unloadId: 'UL20240501-013', checkPerson: '李四',
      checkDate: '2024-05-07', productName: '建筑钢材',
      productCode: 'JG-520', quantity: 10,
      partnerName: '德邦卸货', status: '已验收'
  },
    {
      unloadId: 'UL20240501-014', checkPerson: '王五',
      checkDate: '2024-05-05', productName: '电动工具',
      productCode: 'DT-225', quantity: 21,
      partnerName: '德邦卸货', status: '已验收'
  },
    {
      unloadId: 'UL20240501-015', checkPerson: '张三',
      checkDate: '2024-05-05', productName: '电动工具',
      productCode: 'DT-679', quantity: 48,
      partnerName: '顺丰仓', status: '待验收'
  }
  ])
  const filteredData = ref([...rawData.value])
  
  const form = ref<UnloadItem>({
    unloadId: '', checkPerson: '', checkDate: dayjs().format('YYYY-MM-DD'),
    productName: '', productCode: '', quantity: 0, partnerName: '', status: '待验收'
  })
  
  function openDialog() {
    Object.assign(form.value, {
      unloadId: '', checkPerson: '', checkDate: dayjs().format('YYYY-MM-DD'),
      productName: '', productCode: '', quantity: 0, partnerName: '', status: '待验收'
    })
    dialogVisible.value = true
  }
  
  function editRow(row: UnloadItem) {
    form.value = { ...row }
    dialogVisible.value = true
  }
  
  function saveForm() {
    const index = rawData.value.findIndex(item => item.unloadId === form.value.unloadId)
    if (index > -1) {
      rawData.value[index] = { ...form.value }
    } else {
      rawData.value.push({ ...form.value })
    }
    filterTable()
    dialogVisible.value = false
  }
  
  function deleteRow(unloadId: string) {
    rawData.value = rawData.value.filter(item => item.unloadId !== unloadId)
    filterTable()
  }
  
  function toggleStatus(row: UnloadItem) {
    const index = rawData.value.findIndex(item => item.unloadId === row.unloadId)
    if (index !== -1) {
      rawData.value[index].status = row.status
      filterTable()
    }
  }
  
  function filterTable() {
    const keyword = searchKeyword.value.toLowerCase()
    filteredData.value = rawData.value.filter(item =>
      item.unloadId.toLowerCase().includes(keyword) ||
      item.checkPerson.toLowerCase().includes(keyword)
    ).filter(item => !filterStatus.value || item.status === filterStatus.value)
  }
  
  function exportTable() {
    const headers = ['卸货单号','验收人','验收日期','商品名称','商品编码','数量','合作单位','状态']
    const keys = ['unloadId','checkPerson','checkDate','productName','productCode','quantity','partnerName','status']
    const csv = [
      headers.join(','),
      ...filteredData.value.map(row => keys.map(k => row[k as keyof UnloadItem]).join(','))
    ].join('\n')
  
    const blob = new Blob([csv.replace(/\\n/g, '\n')], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '外包卸货数据.csv'
    link.click()
  }
  </script>
  
  <style scoped>
  .unload-list-container {
    padding: 20px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>
  